<template>
  <div style="margin-top: 10px">
    <el-container>
      <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
        <div style="display: inline">
          <el-input
            placeholder="通过员工名搜索员工,记得回车哦..."
            clearable
            style="width: 300px;margin: 0px;padding: 0px;"
            size="mini"
            v-model="filters.name"
            prefix-icon="el-icon-search">
          </el-input>
          <el-date-picker
            v-model="filters.beginDateScope"
            unlink-panels
            size="mini"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-button type="primary" @click="searchClick" size="mini" style="margin-left: 5px" icon="el-icon-search">搜索
          </el-button>

        </div>
        <div style="margin-left: 5px;margin-right: 20px;display: inline">

          <el-button type="success" @click="handleDown" size="mini"><i class="fa fa-lg fa-level-down"
                                                                       style="margin-right: 5px"></i>导出数据
          </el-button>
          <el-button type="primary" @click="handleAdd" size="mini" icon="el-icon-plus">
            填写周报
          </el-button>
        </div>
      </el-header>
      <el-table id="tableData" :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;text-align: left;">

        <el-table-column prop="author" label="用户" width="120" >
        </el-table-column>
        <el-table-column prop="date" label="日期" width="150"  >
        </el-table-column>
        <el-table-column prop="project" label="项目" width="150" >
        </el-table-column>
        <el-table-column prop="addr" label="工作内容及进度" min-width="180" >
          <template scope="scope">
            <pre v-html="scope.row.content"></pre>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" >
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template scope="scope">
            <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="新增" v-model="addFormVisible" :visible.sync="addFormVisible" :close-on-click-modal="false">
        <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
          <el-form-item label="日期">
            <el-date-picker type="date" style="float:left" placeholder="选择日期" v-model="addForm.date"></el-date-picker>
          </el-form-item>
          <el-form-item label="项目" prop="project">
            <el-input v-model="addForm.project" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item  label="日报内容">
            <el-input type="textarea" v-model="addForm.content"></el-input>
          </el-form-item>
          <el-form-item label="工时/天">
            <el-input v-model="addForm.workDay" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="addForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="addFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
        </div>
      </el-dialog>
      <div style="text-align: right;margin-top: 10px">
        <!--<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
        </el-pagination>-->
        <el-pagination
          background
          :page-size="10"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>

    </el-container>

  </div>
</template>
<script>
  import {postRequest,addDailyReport, getDayReportList,deleteDailyReportByIds } from '../../utils/api'
  export default {
    data() {
      return {
        filters: {
          name: '',
          beginDateScope:''
        },
        users: [],
        total: 0,
        page: 1,
        listLoading: false,
        sels: [],//列表选中列

        editFormVisible: false,//编辑界面是否显示
        editLoading: false,
        editFormRules: {
          author: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ]
        },

        addFormVisible: false,//新增界面是否显示
        addLoading: false,
        addFormRules: {
          author: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ]
        },
        //新增界面数据
        addForm: {
          date: '',
          project: '',
          content: '',
          workDay:5,
          remark:''

        }

      }
    },
    methods: {
      //性别显示转换
      formatSex: function (row, column) {
        return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getUsers();
      },
      //搜索用户列表数据
      searchClick(){
        this.getUsers();
      },

      //获取用户列表
      getUsers() {
        let para = {
          page: this.page,
          keywords: this.filters.name,
          beginDateScope:this.filters.beginDateScope
        };
        this.listLoading = true;
        console.log(para)
        //NProgress.start();
        //getUserListPage(para).then((res) => {
        /* getDayReportList(para).then((res) => {
           console.log(res)
           this.total = res.data.count;
           this.users = res.data.dailylist;
           this.listLoading = false;
           //NProgress.done();
         });*/
        /*let res = getDayReportList()
         console.log(res)
         this.total = res.total;
         this.users = res.list;
         this.listLoading = false;*/

        this.getRequest("/report/weekreport/list?page=" + this.page + "&size=10&keywords=" + this.filters.name + "&beginDateScope=" + this.filters.beginDateScope).then(resp=> {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            this.total = resp.data.count;
            this.users = resp.data.weeklist;
            this.listLoading = false;
//            _this.emptyEmpData();
          }
        })

      },
      //删除
      handleDel: function (index, row) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          //NProgress.start();
          let para =  row.id;
          deleteDailyReportByIds(para).then((res) => {
            this.listLoading = false;
            //NProgress.done();
            console.log(res)
            this.$message({
              message: res.data.msg,
              type: 'success'
            });
            this.getUsers();
          });
        }).catch(() => {

        });
      },
      //显示编辑界面
      handleEdit: function (index, row) {
        this.editFormVisible = true;
        this.editForm = Object.assign({}, row);
      },
      //显示新增界面
      handleAdd: function () {
        this.addFormVisible = true;
        let thisTime = new Date();
        //let newDate = thisTime.getYear() + (thisTime.getMonth()-1)+thisTime.getDay()
        //debugger;
        this.addForm = {
          date: this.formatDate(new Date()),
          project: '周报',
          content: '测试接口',
          workDay:5,
          remark:'测试'
        };
      },
      handleDown:function () {
        let tabData = $("#tabledata")
        console.log(tabData)
        let tableData = $("#tableData")
        console.log(tableData)
        $("#tableData").table2excel({
          exclude: ".noExl",
          name: "Excel Document Name",
          filename: "dailyReport.xls",
          fileext: ".xls",
          exclude_img: true,
          exclude_links: true,
          exclude_inputs: true
        });
      },

      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      //编辑
      editSubmit: function () {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.editLoading = true;
              //NProgress.start();
              let para = Object.assign({}, this.editForm);
              para.birth = (!para.birth || para.birth == '') ? '' : util.formatDate.format(new Date(para.birth), 'yyyy-MM-dd');
              editUser(para).then((res) => {
                this.editLoading = false;
                //NProgress.done();
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.$refs['editForm'].resetFields();
                this.editFormVisible = false;
                this.getUsers();
              });
            });
          }
        });
      },
      //新增
      addSubmit: function () {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.addLoading = true;
              //NProgress.start();
              /*let para = Object.assign({}, this.addForm);

              para.date = (!para.date || para.date == '') ? '' : util.formatDate.format(new Date(para.date), 'yyyy-MM-dd');*/

              //let para = this.addForm
              postRequest('/report/weekreport/add',this.addForm).then((res) => {
                this.addLoading = false;
                console.log("新增数据后返回内容")
                console.log(res)

                //NProgress.done();
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });
                this.$refs['addForm'].resetFields();
                this.addFormVisible = false;
                this.getUsers();
              });
            });
          }
        });
      },
      selsChange: function (sels) {
        this.sels = sels;
      },
      //批量删除
      batchRemove: function () {
        var ids = this.sels.map(item => item.id).toString();
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          //NProgress.start();
          let para = { ids: ids };
          batchRemoveUser(para).then((res) => {
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getUsers();
          });
        }).catch(() => {

        });
      }
    },
    mounted() {
      this.getUsers();
    }
  }
</script>

